<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name">
        <ul>
            <li v-for="(item,index) in filterList">
                {{item.name}} -- {{item.age}} -- {{item.wife}}
            </li>
        </ul>
        <button @click="sortType=1">按年龄升序</button>
        <button @click="sortType=-1">按年龄降序</button>
        <button @click="sortType=0">按年龄的原本顺序</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        data:{
            name:"",
            sortType:0, //0:原本顺序 1:升序 -1:降序
            list:[
                {name:"达姆",age:18,wife:"冬雨"},
                {name:"达姆1",age:15,wife:"冬雨1"},
                {name:"达姆2",age:17,wife:"冬雨2"},
                {name:"达姆3",age:20,wife:"冬雨3"},
                {name:"老付",age:48,wife:"冬瓜"},
                {name:"老刘",age:68,wife:"西瓜"},
                {name:"小乐",age:78,wife:"南瓜"}
            ]
        },
        computed:{
            filterList(){
                /*
                    1.  搞清楚这个js 数组api是干嘛的
                    2.  搞清楚这个js 数组api是有几个参数
                    3.  搞清楚这个js 数组api的返回值
                            返回的满足过滤条件的元素组成的新的数组
                    4.  搞清楚这个js 数组api会不会影响原数组
                            不会影响老数组

                    隐式迭代
                */
                var filterList =  this.list.filter((item,index,arr)=>{
                    return item.name.includes(this.name)
                })


                //排序
                if(this.sortType === 1){
                    //升序
                    filterList.sort((a,b)=>{
                        return a.age - b.age
                    })
                }if(this.sortType === -1){
                    //降序
                    filterList.sort((a,b)=>{
                        return b.age - a.age
                    })
                }

                return filterList;
            }
        }
    })
</script>
</html>